﻿<%@ Page Title="后端到前端" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="B2F.aspx.cs" Inherits="WebForm.B2F" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    
    <p>
        本页示例展示数据从后端到前端的传递。当页面响应请求时，触发Page_Load事件，在事件中，要传递的数据被准备好（此例中为一个整数数组）。
        数据经过格式化，转换为 JSON 格式，并被赋予到名为 “HiddenData” 的属性 —— 这一步在响应事件中完成。
    </p>
    <p>
        由于页面渲染发生在 Page_Load 完成之后，因此在页面设计器上使用 HiddenData 属性时，该属性已经被赋值（保存了数据的 JSON 格式）。
        通过 ASP.NET 的内联代码，数据JSON字符串被设置为 id 为 hiddendata 的 input 元素的值 —— 这一步在渲染时完成。
    </p>
    <p>
        页面被客户浏览器加载后，执行页面包含的 JavaScript 脚本。脚本中，通过 id 获取到名为 “ hiddendata ” 的 input 元素的值，亦即数据的 JSON 格式。
        通过 JSON.parse 函数，JSON 字符串被还原为整型数组对象，并可被进一步使用（此例中数组的元素被动态插入到名为 “datalist” 的列表中）—— 这一步在客户浏览器中执行。
    </p>

    <!--1. 隐藏字段，用于保持从后端传递的数据。此处利用了内插代码设置该 input 的 value。-->
    <input id="hiddendata" name="hiddendata" type="hidden" value="<%: HiddenData %>" />
       
    <!--2. 空的列表，页面加载并获取数据后，将数据中的内容动态插入到列表中。-->
    <ul id="datalist"></ul>

    <script>
        //3. 在脚本标签中，使用 JQuery 在页面加载完成后从 id 为 hiddendata 的隐藏字段中获取传递数据。
        $(function () {
            //4. 从隐藏字段中提取JSON字符串，并转换为整数数组对象。
            var obj = JSON.parse($("#hiddendata").val());
            //5. 在循环中使用数据，此例中为将数组中的值依次添加为 datalist 列表的项。
            for (var i = 0; i < obj.length; i++) {
                $("#datalist").append("<li>" + obj[i] + "</li>");
            }
        });
    </script>
</asp:Content>
